import React, { memo, useEffect, useState } from "react";

import type { MenuProps } from "antd";
import { Menu } from "antd";
import HomeNavWrapper from "./style";
import { useNavigate, useLocation } from "react-router-dom";
import { IStore, SaveBreadCrumbActions } from "@/store";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import {
  FileOutlined,
  LineChartOutlined,
  TeamOutlined,
  PaperClipOutlined,
  ShoppingCartOutlined,
} from "@ant-design/icons";
interface IProps {
  collapsed: boolean;
  theme: boolean;
}
export default memo((props: IProps) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const _ = useLocation();
  const [menu, SetMenu] = useState<any[]>([]);
  const store = useSelector((state: IStore) => state.user, shallowEqual);
  const [defaultMenu, setDefaultMenu] = useState<string[]>([_.pathname]);
  const onClick: MenuProps["onClick"] = (e) => {
    navigate(e.key);
    const route = store.breadcrumb.find((item) => item.path == e.key);
    store.menu.forEach((item) => {
      item.children?.forEach((itemy: any) => {
        if (itemy.key == e.key) {
          !route &&
            dispatch(
              SaveBreadCrumbActions([
                {
                  path: e.key,
                  name: itemy.label,
                },
                ...store.breadcrumb,
              ])
            );
        }
      });
    });
  };
  // 查找菜单返回
  function findOpenMenu() {
    return new Promise((resolve) => {
      let parent: string = "";
      store.menu &&
        store.menu?.forEach((item) => {
          parent = item.key;
          item.children.forEach((itemy: any) => {
            if (itemy.key == _.pathname) {
              store.breadcrumb.length == 0 &&
                dispatch(
                  SaveBreadCrumbActions([
                    {
                      path: itemy.key,
                      name: itemy.label,
                    },
                  ])
                );
              !defaultMenu.includes(_.pathname) &&
                resolve([parent, itemy.key, ...defaultMenu]);
              defaultMenu.includes(_.pathname) && resolve([parent, _.pathname]);
            }
          });
        });
    });
  }
  useEffect(() => {
    findOpenMenu().then((res) => {
      setDefaultMenu(res as string[]);
    });
  }, [_]);
  useEffect(() => {
    let items = store.menu.map((item) => ({
      ...item,
      icon: icon[item.icon],
      children: item.children?.filter(
        (item: any) => !(item.label as string).includes("编辑")
      ),
    }));
    items = items.filter((item) => item.children?.length > 0);
    items = (items as any[]).filter((item) => item.icon);
    items && SetMenu(items);
  }, [store]);
  const icon: any = {
    index: <LineChartOutlined />,
    user: <TeamOutlined />,
    shop: <ShoppingCartOutlined />,
    warehouse: <FileOutlined />,
    article: <PaperClipOutlined />,
    file: <FileOutlined />,
  };

  return (
    <HomeNavWrapper>
      <Menu
        onClick={onClick}
        theme={props.theme ? "dark" : "light"}
        openKeys={defaultMenu}
        selectedKeys={[_.pathname]}
        onOpenChange={(keys) => setDefaultMenu(keys)}
        mode="inline"
        items={menu}
        className="overflow-y-auto"
      />
    </HomeNavWrapper>
  );
});
